<template>
	<view class="reminder-container">
		<!-- 自定义头部 -->
		<view class="custom-header">
			<text class="page-title">用药提醒</text>
			<text class="add-icon" @tap="openAddReminder">+</text>
		</view>

		<!-- 没有提醒时的空白状态 -->
		<view class="empty-state" v-if="reminders.length === 0">
			<image src="/static/images/empty-reminder.png" mode="aspectFit" class="empty-icon"></image>
			<text class="empty-text">您还没有设置用药提醒</text>
			<text class="empty-subtext">点击右上方"+"或下方按钮添加第一个提醒吧！</text>
			<button class="add-reminder-btn" @tap="openAddReminder">添加提醒</button>
		</view>

		<!-- 用药提醒列表 -->
		<scroll-view 
			class="reminder-list" 
			scroll-y 
			v-else
			@refresherrefresh="onRefresh" 
			:refresher-enabled="true"
			:refresher-triggered="refresherTriggered"
		>
			<view 
				v-for="(item, index) in reminders" 
				:key="item.id"
				class="reminder-item"
			>
				<view class="item-main-info">
					<text class="drug-name">{{ item.drugName }}</text>
					<text class="dosage">剂量: {{ item.dosage }}</text>
					<text class="time">用药时间: {{ item.time }}</text>
					<text class="repeat-cycle">重复周期: {{ item.repeatCycle }}</text>
				</view>
				<view class="item-actions">
					<text class="action-btn edit-btn" @tap="editReminder(item)">编辑</text>
					<text class="action-btn delete-btn" @tap="deleteReminder(item.id)">删除</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部悬浮刷新按钮 -->
		<!-- <view class="refresh-float-btn" @tap="refreshReminders"> -->
			<!-- 移除文本，保持纯圆形 -->
		<!-- </view> -->

		<!-- 添加/编辑提醒的弹窗/表单 -->
		<view class="reminder-form-overlay" v-if="showForm">
			<view class="reminder-form-card">
				<text class="form-title">{{ isEditing ? '编辑提醒' : '添加提醒' }}</text>
				<input v-model="formData.drugName" placeholder="药品名称" class="form-input" />
				<input v-model="formData.dosage" placeholder="剂量 (如: 1片, 5ml)" class="form-input" />
				<input v-model="formData.time" placeholder="用药时间 (如: 08:00, 20:00)" class="form-input" />
				<input v-model="formData.repeatCycle" placeholder="重复周期 (如: 每天, 每周一, 隔天)" class="form-input" />
				<view class="form-actions">
					<button @tap="cancelForm" class="form-button cancel-button">取消</button>
					<button @tap="saveReminder" class="form-button save-button">保存</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				reminders: [], // 存储用药提醒的数组
				showForm: false, // 控制添加/编辑表单的显示
				isEditing: false, // 标记当前是否是编辑模式
				formData: { // 表单数据
					id: null,
					drugName: '',
					dosage: '',
					time: '',
					repeatCycle: '',
				},
				nextId: 1, // 用于生成新的提醒ID
				refresherTriggered: false, // 控制下拉刷新状态
			};
		},
		onLoad() {
			// 模拟从本地存储加载数据
			this.loadRemindersFromStorage();
		},
		methods: {
			loadRemindersFromStorage() {
				try {
					const storedReminders = uni.getStorageSync('medicationReminders');
					if (storedReminders) {
						this.reminders = JSON.parse(storedReminders);
						this.nextId = this.reminders.length > 0 ? Math.max(...this.reminders.map(r => r.id)) + 1 : 1;
					} else {
						this.reminders = [];
						this.nextId = 1;
					}
				} catch (e) {
					console.error("加载用药提醒失败", e);
					this.reminders = [];
					this.nextId = 1;
				} finally {
					this.refresherTriggered = false; // 停止刷新动画
				}
			},
			saveRemindersToStorage() {
				try {
					uni.setStorageSync('medicationReminders', JSON.stringify(this.reminders));
				} catch (e) {
					console.error("保存用药提醒失败", e);
				}
			},
			openAddReminder() {
				this.isEditing = false;
				this.resetFormData();
				this.showForm = true;
			},
			editReminder(item) {
				this.isEditing = true;
				this.formData = { ...item }; // 复制当前项的数据到表单
				this.showForm = true;
			},
			saveReminder() {
				if (!this.formData.drugName || !this.formData.dosage || !this.formData.time) {
					uni.showToast({ title: '请填写药品名称、剂量和时间', icon: 'none' });
					return;
				}

				if (this.isEditing) {
					// 编辑模式：更新现有提醒
					const index = this.reminders.findIndex(r => r.id === this.formData.id);
					if (index !== -1) {
						this.$set(this.reminders, index, { ...this.formData });
					}
					uni.showToast({ title: '提醒已更新', icon: 'success' });
				} else {
					// 添加模式：新增提醒
					const newReminder = { ...this.formData, id: this.nextId++ };
					this.reminders.push(newReminder);
					uni.showToast({ title: '提醒添加成功', icon: 'success' });
				}
				this.saveRemindersToStorage();
				this.closeForm();
			},
			deleteReminder(id) {
				uni.showModal({
					title: '删除提醒',
					content: '确定要删除这条用药提醒吗？',
					success: (res) => {
						if (res.confirm) {
							this.reminders = this.reminders.filter(item => item.id !== id);
							this.saveRemindersToStorage();
							uni.showToast({ title: '提醒已删除', icon: 'success' });
						}
					}
				});
			},
			cancelForm() {
				this.closeForm();
			},
			closeForm() {
				this.showForm = false;
				this.resetFormData();
			},
			resetFormData() {
				this.formData = {
					id: null,
					drugName: '',
					dosage: '',
					time: '',
					repeatCycle: '',
				};
			},
			onRefresh() {
				this.refresherTriggered = true; // 开启下拉刷新动画
				this.loadRemindersFromStorage(); // 重新加载数据
			},
			refreshReminders() {
				uni.showLoading({
					title: '刷新中...',
					mask: true
				});
				this.loadRemindersFromStorage();
				uni.hideLoading();
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 页面整体容器 */
	.reminder-container {
		background-color: #f5f8fa;
		min-height: 100vh;
		padding-bottom: 120rpx; /* 预留底部悬浮按钮空间 */
		box-sizing: border-box;
		position: relative;
		padding-top: 0; /* 移除自定义头部，顶部内边距为0 */
	}

	/* 自定义头部样式 */
	.custom-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx; /* 固定高度 */
		padding: 0 30rpx; /* 调整内边距 */
		background-color: #f5f8fa; /* 与页面背景色一致 */
		border-bottom: 1rpx solid #eee;
		margin-top: var(--window-top); /* 适配原生导航栏高度 */
	}

	.page-title {
		font-size: 36rpx; /* 调整字体大小 */
		font-weight: bold;
		color: #333;
	}

	.add-icon {
		font-size: 50rpx; /* 调整加号图标大小 */
		font-weight: bold;
		color: #007bff; /* 蓝色加号 */
		padding: 0 10rpx;
		line-height: 1;
	}

	/* 空白状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: calc(100vh - 120rpx - 100rpx - var(--window-top)); /* 减去底部按钮高度、自定义头部高度和原生导航栏高度 */
		padding: 0 40rpx;
		text-align: center;
	}

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 32rpx;
		color: #666;
		margin-bottom: 15rpx;
	}

	.empty-subtext {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 50rpx;
	}

	.add-reminder-btn {
		width: 90%; /* 按钮宽度调整 */
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(135deg, #007bff, #0056b3); /* 渐变蓝色 */
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		box-shadow: 0 8rpx 16rpx rgba(0, 123, 255, 0.3);
		position: absolute; /* 绝对定位 */
		bottom: 30rpx; /* 距离底部30rpx */
		left: 50%; /* 水平居中 */
		transform: translateX(-50%); /* 水平居中 */
		margin: 0; /* 移除原有外边距 */
		z-index: 99; /* 确保在其他元素之上 */
	}

	/* 用药提醒列表 */
	.reminder-list {
		padding: 20rpx;
		height: calc(100vh - 100rpx - 120rpx - var(--window-top)); /* 减去自定义头部高度、底部悬浮按钮高度和原生导航栏高度 */
		box-sizing: border-box;
	}

	.reminder-item {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 24rpx; /* 调整内边距 */
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.06); /* 调整阴影 */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-main-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.drug-name {
		font-size: 34rpx; /* 调整字体大小 */
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx; /* 调整间距 */
	}

	.dosage, .time, .repeat-cycle {
		font-size: 26rpx; /* 调整字体大小 */
		color: #666;
		margin-bottom: 4rpx; /* 调整间距 */
	}

	.item-actions {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx; /* 调整左侧间距 */
		gap: 10rpx; /* 按钮间距 */
	}

	.action-btn {
		font-size: 24rpx; /* 调整字体大小 */
		padding: 6rpx 12rpx; /* 调整内边距 */
		border-radius: 6rpx; /* 调整圆角 */
		text-align: center;
		white-space: nowrap;
	}

	.edit-btn {
		background-color: #e0f0ff;
		color: #007bff;
	}

	.delete-btn {
		background-color: #ffe0e0;
		color: #dc3545;
	}

	/* 底部悬浮刷新按钮 */
	.refresh-float-btn {
		position: fixed;
		bottom: 30rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #007bff, #0056b3); /* 渐变蓝色 */
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 8rpx 16rpx rgba(0, 123, 255, 0.4);
		z-index: 99;
	}

	/* 添加/编辑表单弹窗样式 */
	.reminder-form-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		animation: fadeIn 0.3s ease-out; /* 弹窗进入动画 */
	}

	.reminder-form-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		width: 90%;
		max-width: 600rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
		animation: slideInUp 0.3s ease-out; /* 卡片进入动画 */
	}

	.form-title {
		font-size: 38rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
		display: block;
		text-align: center;
	}

	.form-input {
		width: 100%;
		height: 90rpx; /* 增加高度 */
		border: 1rpx solid #dcdfe6; /* 更细的边框颜色 */
		border-radius: 16rpx; /* 增大圆角 */
		padding: 0 30rpx; /* 增大内边距 */
		margin-bottom: 30rpx; /* 增大底部间距 */
		font-size: 30rpx;
		box-sizing: border-box;
	}

	.form-actions {
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
	}

	.form-button {
		width: 45%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin: 0;
		padding: 0;
	}

	.cancel-button {
		background-color: #f0f0f0;
		color: #666;
	}

	.save-button {
		background-color: #007bff;
		color: #fff;
	}

	/* 动画定义 */
	@keyframes fadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes slideInUp {
		from { transform: translateY(100%); opacity: 0; }
		to { transform: translateY(0); opacity: 1; }
	}
</style>
